<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-23 15:27:05
 * @LastEditTime: 2019-08-31 16:07:35
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div id="app">
    <div class="box">
      <div class="border-outline flex-ju-between">
        <div class="border-right-e8" style="width:50%">
          <p class="bg-color-lighter" style="margin: 0 0; padding: 12px 0 0 24px">全部类目</p>
          <class-tree ref="tree" v-bind:getDataUrl="getDataUrl" @handleGetValChild="handleGetVal"></class-tree>
        </div>
        <div style="width:50%">
          <p class="bg-color-lighter" style="margin: 0 0; padding: 12px 0 0 24px">已选类目</p>
          <data-list :dataList="dataList" @removeIndexDataChild="removeIndexData"></data-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import treeTransfer from "el-tree-transfer";
import classTree from "@/components/classTree.vue";
import dataList from "@/components/dataList.vue";

export default {
  name: "app",
  props: {
    getDataUrl: {
      type: String,
      default:
        "http://yapi.devops.erp.ocj.com.cn/mock/219/api/bom/category/CategoryQueryFacade/queryTreeList"
    }
  },
  data() {
    return {
      dataList: [], //目标数据
      orignalDataList:[],//目标数据原始数据
      removeIndex: null //清除数据index
    };
  },
  created() {},
  methods: {
    //数据清洗
    handleGetVal(val) {
      this.orignalDataList=val;
      let resVal = [];
      val.map(item => {
        let valArr = [];
        item.map(cell => {
          valArr.push(cell.name);
        });
        valArr = valArr.join("/");
        resVal = [...resVal, valArr];
      });
      this.dataList = resVal;
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    removeIndexData(index) {
      this.$refs.tree.removeFromIndex(index);
    },
    //提交数据 this.orignalDataList
    submit() {
      this.$emit('childSubmit',this.orignalDataList);
    }
  },
  computed: {},
  components: { classTree, dataList }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
}

.box {
  height: 400px;
  width: 680px;
  margin: 0 auto;
  text-align: left;
  overflow-y: scroll;
  display: flex;
}
</style>
